<script setup>
import { setLanguage } from '@core/i18n';

const languages = {
  'zh-CN': '简体中文',
  'en-US': 'English (US)',
};
const currentLanguage = ref(languages['zh-CN']);
const onClickUserManagement = (key) => {
  setLanguage(key);
};
</script>

<template>
  <ElDropdown disabled>
    <div class="language-selector">
      <span>{{currentLanguage}}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem v-for="(language, key) in languages" :key="key" @click="onClickUserManagement(key)">
          {{language}}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="scss" scoped>
.language-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 32px;
  font-size: 12px;
  color: #c2c2c2;

  .icon-translate {
    margin-right: 6px;
  }
}
</style>
